<!DOCTYPE html>
<html lang="zh">

<head>
	<link rel="icon" href="https://qzonestyle.gtimg.cn/aoi/img/logo/favicon.ico">
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>QQ空间备份-相片</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/lightgallery/2.3.0/css/lightgallery.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/lightgallery/2.3.0/css/lightgallery-bundle.min.css">
	<link rel="stylesheet" type="text/css" href="../Common/css/common.css">
	<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
	<script src="https://cdn.staticfile.org/bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
	<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
	
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/lightgallery.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/zoom/lg-zoom.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/video/lg-video.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/thumbnail/lg-thumbnail.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/rotate/lg-rotate.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/hash/lg-hash.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/fullscreen/lg-fullscreen.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/comment/lg-comment.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/autoplay/lg-autoplay.min.js"></script>

	<script src="https://cdn.staticfile.org/jquery_lazyload/2.0.0-rc.2/lazyload.min.js"></script>
	<script src="https://fastly.jsdelivr.net/npm/template_js@2.2.1/dist/index.aio.min.js" integrity="sha256-gnK+GsIXEBgu/mJouMDtUxXvXM3M0jzxNYmjnlsifgY=" crossorigin="anonymous"></script>
	<script src="https://www.lvshuncai.com/custom/js/clicklove.min.js"></script>

	<script type="text/javascript" src="../Albums/json/albums.js"></script>
</head>

<body>
	<header>
		<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
			<a class="navbar-brand" target="_blank" href="https://github.com/ShunCai/QZoneExport">QQ空间导出助手</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb bg-dark">
						<li class="breadcrumb-item"><a href="../index.html">个人中心</a></li>
						<li class="breadcrumb-item"><a href="index.html">相册</a></li>
						<li class="breadcrumb-item active" aria-current="page">相册名称</li>
					</ol>
				</nav>
			</div>
		</nav>
	</header>
	<main role="main">
		<div class="albums py-5 bg-light" style="padding-top: 4rem!important;">
			<div class="container-fluid tz-gallery">
				<div id="lightgallery" class="row photos">
					<script id="photos_tpl" type="text/html">
						<%/* 遍历相片 */%>
						<%for (const photo of album.photoList) {%>
							<%photo.uid = 'QZ-' + API.Utils.newSimpleUid(16)%>
							<%photo.custom_lbs = API.Photos.getPhotoLbs(photo)%>
							<div class="col-md-2 mb-2">
								<div class="card thumbnail mb-2 shadow-sm">
									<%if(!photo.isLocal){%>
										<div id="<%:=photo.uid%>" class='photo-detail' style="display:none">
											<div class="d-flex justify-content-between">
												<div class="col text-white-50 text-left">
													<p>
														<i title="相片尺寸（非原图尺寸，仅供参考）"><%:=(photo.video_info && photo.video_info.cover_width || photo.width)+ " * " + (photo.video_info && photo.video_info.cover_height || photo.height)%></i>
														<i title="相片大小（非原图尺寸，仅供参考）" class="ml-2"><%:=API.Utils.formatFileSize(photo.video_info && photo.video_info.size || photo.photocubage || 0)%></i>
														<i title="相片类型" class="ml-2"><%:=photo.is_video ? 'MP4' : API.Photos.getPhotoType(photo)%></i>
													</p>
													<p>
														<i title="拍摄/上传时间" class="fa fa-clock-o text-primary"><%:=API.Utils.formatDate((photo.rawshoottime || photo.shootTime) || (photo.uploadtime || photo.uploadTime))%></i>
														<%if(photo.custom_lbs && photo.custom_lbs.name){%>
															<a title="拍摄/上传地点" class="ml-2 text-primary" href="<%:=API.Messages.getMapUrl(photo.custom_lbs)%>" target="_blank"><i class="fa fa-map-marker"></i><%:=photo.custom_lbs.idname || photo.custom_lbs.name%></a>
														<%}%>
													</p>
												</div>
												<div class="col text-center text-truncate">
													<%if(photo.name){%>
														<h6 data-toggle="tooltip" data-html="true" title="<%:=API.Common.formatContent(photo.name, 'HTML', false, false)%>"><%:=API.Common.formatContent(photo.name, "HTML", false, false)%></h6>
													<%}%>
													<%if(photo.desc){%>
														<span class="text-white-50" data-toggle="tooltip" data-html="true" title="<%:=API.Common.formatContent(photo.desc, 'HTML', false, false)%>"><%:=API.Common.formatContent(photo.desc, "HTML", false, false)%></span>
													<%}%>
												</div>
												<div class="col"></div>
											</div>
										</div>
									<%}%>
									<%if(photo.is_video && photo.video_info){%>
										<a class="lightbox" data-video='{"source": [{"src":"<%:=API.Common.getMediaPath(photo.video_info.video_url, photo.custom_filepath, "Photos_HTML")%>", "type":"video/mp4"}],"attributes": {"preload": false, "controls": true}}' 
											data-poster="<%:=API.Common.getMediaPath(photo.custom_url, photo.custom_pre_filepath, 'Photos_HTML')%>" data-toggle="tooltip" data-html="true" title="<%:=API.Common.formatContent(photo.desc || photo.name, 'HTML', false, false)%>" data-sub-html="#<%:=photo.uid%>">
											<span class="photo-video"></span>
											<%if(photo.isLocal){%>
												<img class="lazyload loading" />
											<%}else{%>
												<img class="lazyload loading" src="../Common/images/loading.gif" data-src="<%:=API.Common.getMediaPath(photo.custom_url, photo.custom_pre_filepath,'Photos_HTML')%>" />
											<%}%>
										</a>
										<div class="card-body text-truncate">
											<span class="card-title" data-toggle="tooltip" data-html="true" title="<%:=(API.Common.formatContent(photo.name, 'HTML', false, false) || API.Utils.formatDate(photo.uploadtime || photo.uploadTime))%>"><%:=(API.Common.formatContent(photo.name, 'HTML', false, false) || API.Utils.formatDate(photo.uploadtime || photo.uploadTime))%></span>
										</div>
										<div class="pic-num-wrap d-flex justify-content-around">
											<div class="align-self-end">
												<span class="text-light fa fa-thumbs-o-up cursor viewlikes" title="查看点赞" data-field="uniKey" data-target="<%:=photo.uniKey%>"><%:=photo.likes ? photo.likes.length : 0%></span>
											</div>
											<div class="align-self-end">
												<span class="text-light fa fa-comments-o cursor viewcomments" title="查看评论" data-field="uniKey" data-target="<%:=photo.uniKey%>"><%:=photo.comments ? photo.comments.length : 0%></span>
											</div>
										</div>
									<%}else{%>
										<a class="lightbox" href="<%:=API.Common.getMediaPath(photo.custom_url, photo.custom_filepath, 'Photos_HTML')%>" data-toggle="tooltip" data-html="true" title="<%:=photo.desc || photo.name%>" data-sub-html="#<%:=photo.uid%>">
											<img class="lazyload loading card-img" height="225px" src="../Common/images/loading.gif" data-src="<%:=API.Common.getMediaPath(photo.custom_url, photo.custom_pre_filepath || photo.custom_filepath, 'Photos_HTML')%>">
										</a>
										<div class="card-body  text-truncate">
											<span class="card-title" data-toggle="tooltip" data-html="true" title="<%:=(API.Common.formatContent(photo.name, 'HTML', false, false) || API.Utils.formatDate(photo.uploadtime || photo.uploadTime))%>"><%:=(API.Common.formatContent(photo.name, 'HTML', false, false) || API.Utils.formatDate(photo.uploadtime || photo.uploadTime))%></span>
										</div>
										<div class="pic-num-wrap d-flex justify-content-around">
											<div class="align-self-end">
												<span class="text-light fa fa-thumbs-o-up cursor viewlikes" title="查看点赞" data-field="uniKey" data-target="<%:=photo.uniKey%>"><%:=photo.likes ? photo.likes.length : 0%></span>
											</div>
											<div class="align-self-end">
												<span class="text-light fa fa-comments-o cursor viewcomments" title="查看评论" data-field="uniKey" data-target="<%:=photo.uniKey%>"><%:=photo.comments ? photo.comments.length : 0%></span>
											</div>
										</div>
									<%}%>
								</div>
							</div>
						<%}%>
					</script>
				</div>
			</div>
		</div>
	</main>
	<script type="text/javascript">
		// 当前相册ID
		window.albumId ='<%:=(albumId)%>';
	</script>
	<script type="text/javascript" src="../Common/js/common.js"></script>
	<script type="text/javascript" src="js/photos.js"></script>
</body>

</html>